var React = require("react");

var VoaItem = require("./VoaItem.js");

var VoaLoading = require("./VoaLoading");

var VoaDetail = require("./VoaDetail.js");

var VoaModel = require("../model/VoaModel.js");
var Collection =require("../collection/Collection.js");

var VoaPage = require("./VoaPage");

module.exports = React.createClass({

       getInitialState:function(){
           
           
           return{
               
               isLoading:this.props.isLoading,
           }
       },
  

		render:function(){

        var models = this.props.collection;
        
        var model = this.props.model;
    
         var itemList =<VoaLoading spinnerName="three-bounce" />;
        if(models instanceof Collection&&! this.props.isLoading)
        {
            self = this;

         itemList = models.map(function(qst){

           
            return <VoaItem key={qst.id} 
                model ={qst}  details={self.props.details} />
              }.bind(this) );
             
         itemList.push(<VoaPage key="page"  collection={models}  detailList={this.props.detailList}/>);
         itemList.splice(0,0,<h3>{models.state.title}</h3>);
        }
        
        if(model instanceof VoaModel&&! this.props.isLoading){
            
           itemList = <VoaDetail model={model} />
        }
      
			return (


           <div id="right-panle">
                <div>
                <div className="col-xs-12 col-sm-9 sidebar-offcanvas row row-offcanvas row-offcanvas-right">
                      <div className="list-group" id="item-list">
                                {itemList}
            			  
                          </div>
                 </div>
                 </div>
               </div>

		)

		}

});
